@charset 'utf-8';


@mixin clamp($lines: 2) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }
}

@mixin text-overflow() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin ellipsis($height, $lineHeight, $openWidth, $fontSize) {
    height: $height;
    line-height: $lineHeight;
    overflow: hidden;
    text-align: justify;

    &::before {
        float: left;
        width: 5px;
        content: "";
        height: $height;
    }

    &::after {
        float: right;
        color: #999;
        content: "...";
        height: $lineHeight;
        font-size: $fontSize;
        line-height: $lineHeight;
        padding-right: 5px;
        text-align: right;
        width: $openWidth;
        margin-left: -($openWidth);
        position: relative;
        left: 100%;
        top: -$lineHeight;
        padding-right: 5px;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            white 50%,
            white
        );
        box-sizing: content-box;
    }

    .text {
        color: inherit;
        font-size: inherit;
        float: right;
        margin-left: -5px;
        width: 100%;
        word-break: break-all;
    }
}

@mixin lineToHalf($color: #e4e4e4) {
    & {
        position: relative;
    }

    &::after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        background: $color;
        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
    }
}
